<template>
  <div class="el_card_main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input placeholder="根据用户名搜索" v-model="obj.title" clearable>
        </el-input>
        <el-button style="padding: 3px 0" @click="clearContent">清空</el-button>
        <el-button style="padding: 3px 0" type="primary" @click="search"
          >搜索</el-button
        >

        <el-button
          style="float: right; padding: 3px 0"
          icon="el-icon-edit"
          type="success"
          @click="$refs.perAdd.dialogFormVisible = true"
          >新增权限组</el-button
        >
      </div>
      <el-alert :title="title" type="info" show-icon :closable="closable">
      </el-alert>
      <!-- 用户列表 -->
      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="title"
            label="用户名"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="create_date"
            label="日期"
            header-align="center"
            sortable
            align="center"
          >
            <template #default="{ row }">
              <span>{{ parse(row.create_date) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                circle
                style="width: 36px; height: 36px"
                @click="handleEdit(scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                style="width: 36px; height: 36px"
                @click="handleDelete(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <PermissionsAdd
        ref="perAdd"
        :text="text"
        :ruleInline="rules"
        @closeDialog="closeDialog"
      />
      <!-- 放置分页组件 -->
      <el-row type="flex" style="height: 60px" align="middle" justify="end">
        <!-- 放置分页组件 -->
        <el-pagination
          layout="prev, pager, next, sizes,jumper"
          :total="total"
          :current-page="obj.page"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="obj.pagesize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { list, remove, simple } from '@/api/base/permissions.js'
import { parseTime } from '@/utils/index.js'
import PermissionsAdd from '../components/permissions-add.vue'
export default {
  components: {
    PermissionsAdd
  },
  data () {
    return {
      value: false,
      dialogVisible: false,
      closable: false,
      text: '创建权限组',
      total: 0,
      props: {
        label: 'name',
        children: 'zones'
      },
      // 表单校验规则
      rules: {
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      obj: {
        page: 1,
        pagesize: 10,
        title: ''
      },
      tableData: []
    }
  },

  async created () {
    this.renderTable()
  },

  methods: {
    // 格式化时间
    parse (time) {
      const res = parseTime(time)
      return res
    },
    // 清空事件
    clearContent () {
      this.input = ''
    },
    // 渲染表单
    async renderTable () {
      const { data } = await list(this.obj)
      this.total = data.counts
      this.tableData = [...data.list]
    },
    // 编辑权限组
    async handleEdit (row) {
      // TODO
      console.log(1)
      this.$refs.perAdd.dialogFormVisible = true
      const res = await simple(row.id)
      console.log(res)
    },
    // checkbox 改变
    handleCheckChange (data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    // 删除成员
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = {
            id: row.id
          }
          const res = await remove(data)
          console.log(res)
          this.renderTable()

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索
    async search () {
      const { data } = await list(this.obj)
      console.log(data)
      this.total = data.counts
      this.tableData = [...data.list]
    },
    // 页数变化时触发
    handlePageChange (pageNum) {
      this.obj.page = pageNum
      this.renderTable()
    },
    // 每页显示信息条数
    handleSizeChange (pageSize) {
      this.obj.pagesize = pageSize
      this.renderTable()
    }
  },
  computed: {
    // 消息记录
    title () {
      return `共 ${this.total} 条记录`
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  width: 1681px;
  margin: 0 auto;
  padding: 20px;
  margin-top: 20px;
  .el-input {
    width: 200px;
    height: 32px;
  }
  .addForm {
    .el-input {
      width: 280px;
      height: 36px;
    }
  }
  .el-button--default {
    width: 56px;
    height: 32px;
    margin: 0 0 0 15px;
  }
  .el-alert--info {
    margin-bottom: 20px;
  }
  .el-button--primary {
    width: 56px;
    height: 32px;
  }
  .el-button--success {
    width: 97px;
    height: 32px;
    font-size: 12px;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
}
</style>
